<div class="h-full py-3 extension-detail" *ngIf="extensionDetail">
  <div class="sticky top-0 z-50 px-2 bg-white">
    <div class="pb-3 flex justify-between h-[36px]">
      <div class="flex items-center">
        <a nz-button nzType="link" (click)="backToList()">
          <eo-iconpark-icon name="left" class="anticon" size="16px"></eo-iconpark-icon><span i18n>Back</span>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <div class="mr-2">
          <nz-avatar nzSize="small" class="!w-[20px] !h-[20px]" nzSrc="{{ extensionDetail.logo }}"></nz-avatar>
        </div>
        <span class="font-bold text-[14px]">{{ extensionDetail.title || extensionDetail.moduleName }}</span>
        <ng-container *ngIf="extensionDetail?.installed">
          <nz-switch
            [(ngModel)]="isEnable"
            nzSize="small"
            class="ml-2.5"
            (ngModelChange)="handleEnableExtension($event)"
          >
          </nz-switch>
        </ng-container>
      </div>
    </div>
  </div>
  <section class="h-full px-4 max-w-[80vw] mx-auto flex flex-col">
    <p class="w-full text-[#888] text-[12px]">{{ extensionDetail.description }}</p>
    <div>
      <button
        nz-button
        [nzSize]="extensionDetail?.installed ? 'small' : 'default'"
        [nzType]="extensionDetail?.installed ? 'default' : 'primary'"
        class="mt-[8px]"
        [nzLoading]="isOperating"
        (click)="handleInstall()"
      >
        <span *ngIf="extensionDetail?.installed" i18n>Uninstall</span>
        <span *ngIf="!extensionDetail?.installed" i18n>Install</span>
      </button>
    </div>

    <nz-tabset
      [(nzSelectedIndex)]="nzSelectedIndex"
      [nzAnimated]="false"
      [class]="{ settings: nzSelectedIndex === 0 && extensionDetail?.features?.configuration }"
      (nzSelectChange)="handleTabChange($event)"
    >
      <!-- CustomTab -->
      <!-- <nz-tab *ngFor="let item of customTabs " i18n-nzTitle nzTitle="CustomTab">
        <extension-app [url]="item.url" [name]="extName + '--' + item.name"></extension-app>
      </nz-tab> -->
      <!-- Setting -->
      <nz-tab
        *ngIf="extensionDetail?.features?.configuration && extensionDetail?.installed"
        i18n-nzTitle
        nzTitle="Settings"
      >
        <eo-extension-setting
          [configuration]="extensionDetail?.features?.configuration"
          [extName]="extensionDetail.name"
        ></eo-extension-setting>
      </nz-tab>
      <!-- Details -->
      <nz-tab i18n-nzTitle="@@ExtensionDetail" nzTitle="Details">
        <div class="h-full overflow-auto preview_tab">
          <nz-skeleton [nzLoading]="introLoading" [nzActive]="true">
            <eo-shadow-dom class="md-preview" [text]="extensionDetail.introduction" [options]="{ html: true }">
            </eo-shadow-dom>
          </nz-skeleton>
        </div>
      </nz-tab>
      <nz-tab i18n-nzTitle nzTitle="Support">
        <nz-descriptions [nzColumn]="1" nzTitle="">
          <nz-descriptions-item i18n-nzTitle nzTitle="Author">{{ extensionDetail.author }}</nz-descriptions-item>
          <nz-descriptions-item i18n-nzTitle nzTitle="Version">{{ extensionDetail.version }} </nz-descriptions-item>
          <nz-descriptions-item *ngIf="extensionDetail.repository?.url" i18n-nzTitle nzTitle="Repository">
            <a [href]="extensionDetail.repository.url.replace('git+', '')" target="_blank">
              {{ extensionDetail.repository.url.replace('git+', '') }}
            </a>
          </nz-descriptions-item>
          <nz-descriptions-item *ngIf="extensionDetail.homepage" i18n-nzTitle nzTitle="Homepage">
            <a [href]="extensionDetail.homepage" target="_blank">{{ extensionDetail.homepage }}</a>
          </nz-descriptions-item>
          <nz-descriptions-item *ngIf="extensionDetail.bugs?.url" i18n-nzTitle nzTitle="BugReport">
            <a [href]="extensionDetail.bugs.url" target="_blank">{{ extensionDetail.bugs.url }}</a>
          </nz-descriptions-item>
        </nz-descriptions>
      </nz-tab>
      <nz-tab *ngIf="changeLog" i18n-nzTitle nzTitle="ChangeLog">
        <nz-skeleton class="preview_tab" [nzLoading]="changelogLoading" [nzActive]="true">
          <eo-shadow-dom *ngIf="!changeLogNotFound" class="md-preview" [text]="changeLog"> </eo-shadow-dom>
          <nz-result nzStatus="info" i18n-nzTitle nzTitle="Changelog failed to load" *ngIf="changeLogNotFound">
            <div nz-result-extra>
              <button nz-button nzType="primary" i18n (click)="fetchChangelog()">Reacquire</button>
            </div>
          </nz-result>
        </nz-skeleton>
      </nz-tab>
    </nz-tabset>
  </section>
</div>
